<template>
	<x-popup :value="value" mode="bottom" z-index="999999" @close="$emit('input', false)">
		<view class="score-container u-p-t-38">
			<!-- 头部 -->
			<view class="score-header flex-between">
				<!-- <view @click="submitAction">{{ lang_common.done }}</view> -->
				<view class="score-header-title u-text-center u-f-36 u-lh-50 font-medio">
					{{ lang_personal.payMethod }}</view>
				<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx;"
					class="clear-flex close-btn" @click="$emit('input', false)"></image>
			</view>
	
			<!-- <view class="u-m-t-12 u-p-b-28 u-f-28 u-lh-40 color-grew u-text-center">温馨提示：内未付款将自动取消</view> -->
	
			<view style="width: 100%;border-bottom: 6rpx solid #f9f9f9;"></view>
	
			<!-- 充值方式选项 -->
			<view class="u-p-t-20 u-p-b-20 u-f-28 u-lh-44">
				<template v-if="isNormal">
					<view v-if="info.isAllowIntegralPay" class="pay-item flex-center-between" @click="submitAction(0)">
						<view class="flex">
							<view class="font-medio">{{ lang_common.scorePay }}: {{ info.totalIntegral || 0 }}</view>
							<view class="color-red">（{{ lang_common.hasScore[0] }}{{ integral }}{{ lang_common.hasScore[1] }}）</view>
						</view>
						<u-icon name="right" custom-prefix="u" size="28" color="#999"></u-icon>
					</view>
					<view class="pay-item flex-center-between" @click="submitAction(1)">
						<view class="flex">
							<view class="flex-baseline font-medio">{{ lang_common.amountPay }}: <view class="u-f-24">{{ lang_unit.money }}
								</view>{{ info.totalAmount || 0 }}</view>
							<view class="color-red">（{{ lang_common.hasAmount[0] }}￥{{ balance }}）</view>
						</view>
						<u-icon name="right" custom-prefix="u" size="28" color="#999"></u-icon>
					</view>
				</template>
				
				<template v-else>
					<view class="pay-item flex-center-between" @click="submitAction(2)">
						<view class="flex">
							<view class="flex-baseline font-medio">paypal: <view class="u-f-24">{{ lang_unit.money }}
								</view>{{ info.totalAmount || 0 }}</view>
						</view>
						<u-icon name="right" custom-prefix="u" size="28" color="#999"></u-icon>
					</view>
				</template>
			</view>
		</view>
	</x-popup>
</template>

<script>
	export default {
		props: {
			value: {
				default: false
			},
			info: {
				default: () => ({})
			}
		},
		data() {
			return {
				pays: []
			}
		},
		computed: {
			isNormal() {
				return this.info.orderType !== 6
			}
		},
		created() {
			this.pays = [{
					key: 'score',
					label: '积分支付',
					value: 1
				},
				{
					key: 'balance',
					label: '余额支付',
					value: 2
				},
				{
					key: 'paypal',
					label: 'paypal',
					value: 3
				}
			]
		},
		methods: {
			submitAction(index) {
				this.$emit('change', this.pays[index].value)
				this.cancelAction()
			},
			cancelAction() {
				this.$emit('input', false)
			}
		}
	}
</script>

<style scoped lang="scss">
	.score {
		&-header {
			position: relative;
			height: 50rpx;

			&-title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			.close-btn {
				position: absolute;
				right: 30rpx;
				top: 0rpx;
			}
		}

		&-container {
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
		}

		&-item-card {
			width: 210rpx;
			height: 210rpx;
			border: 6rpx solid #F9F9F9;
			border-radius: 30rpx;

			&-active {
				border-color: #FD1E43
			}
		}
	}

	.pay {
		&-item {
			padding: 28rpx 32rpx;
			border-bottom: 2rpx solid #f9f9f9;
		}
	}
</style>
